<template>
  <!-- 详细页 -->
  <view class="look">
    <swiper circular :current="picIndex" @change="picIndexChange">
      <swiper-item v-for="(item, index) in FenLeiList_Look" :key="item._id">
        <!-- 这里优化性能，将看过的图片放进数组,判断图片的索引显示它 -->
        <image
          v-if="LookImage.includes(index)"
          @click="isShow"
          mode="scaleToFill"
          :src="item.picurl"
        ></image
      ></swiper-item>
    </swiper>

    <view class="show" v-show="show">
      <!-- 返回 -->
      <view class="to-back" @click="toBack">
        <uni-icons type="back" size="30" color="white"></uni-icons>
      </view>

      <!-- 图片.length -->
      <view class="num">{{ picIndex + 1 }} / {{ FenLeiList_Look.length }}</view>

      <!-- 时间 -->
      <view class="time">
        <uni-dateformat :date="new Date()" format="hh:mm"></uni-dateformat>
      </view>

      <!-- 日期 -->
      <view class="date">
        <uni-dateformat :date="new Date()" format="MM月dd日"></uni-dateformat>
      </view>

      <!-- 图片相关信息 -->
      <view class="about" v-if="PicInfo">
        <view class="box" @click="toInfo">
          <uni-icons type="info" size="30" color="white"></uni-icons>
          <text>信息</text>
        </view>
        <view class="box" @click="pingFen">
          <uni-icons type="star" size="30" color="white"></uni-icons>
          <text>{{ PicInfo.score }}分</text>
        </view>
        <view class="box" @click="download">
          <uni-icons type="download" size="30" color="white"></uni-icons>
          <text>下载</text>
        </view>
      </view>
    </view>

    <!-- 图片信息遮罩层 -->
    <uni-popup
      ref="TuInfo"
      type="bottom"
      border-radius="10px 10px 0 0"
      background-color="#fff"
    >
      <view class="info" v-if="PicInfo">
        <view class="title">壁纸信息</view>
        <!-- 返回 -->
        <view class="info-back" @click="closeInfo">
          <uni-icons type="closeempty" size="30"></uni-icons>
        </view>
        <!-- 壁纸id -->
        <view class="info-id">
          <view class="info-title">壁纸ID:</view>
          <text selectable class="right">{{ PicInfo._id }}</text>
        </view>
        <!-- 分类 -->
        <!-- <view class="info-fen">
          <view class="info-title">分类:</view>
          <text selectable class="right color">明星美女</text>
        </view> -->
        <!-- 发布信息 -->
        <view class="info-fa">
          <view class="info-title">发布者:</view>
          <text selectable class="right">{{ PicInfo.nickname }}</text>
        </view>
        <!-- 评分 -->
        <view class="info-ping-fen">
          <view class="info-title">评分:</view>

          <view class="right">
            <uni-rate readonly touchable :value="PicInfo.score"></uni-rate>
            <text>{{ PicInfo.score }}分</text>
          </view>
        </view>
        <!-- 摘要 -->
        <view class="info-zhai">
          <view class="info-title">摘要:</view>
          <text selectable class="right"> {{ PicInfo.description }}</text>
        </view>
        <!-- 标签 -->
        <view class="info-biao">
          <view class="info-title">标签:</view>
          <view class="right">
            <uni-tag
              :circle="true"
              :inverted="true"
              :text="item"
              type="success"
              v-for="item in PicInfo.tabs"
              :key="item"
            />
          </view>
        </view>
        <!-- 声明 -->
        <view class="info-sheng">
          <text selectable>
            声明:
            本图片来自用户投稿，非商业使用，用于免费学习交流，如侵犯了您的权益，可联系管理员：JavaScript159进行删除
          </text>
        </view>
      </view>
    </uni-popup>

    <!-- 评分遮罩层 -->
    <uni-popup
      :is-mask-click="false"
      ref="rateValue"
      type="center"
      border-radius="10px 10px 0 0"
    >
      <view class="rate">
        <view class="rate-title">壁纸评分</view>
        <!-- 关闭图标 -->
        <view class="rate-close" @click="closePingFen">
          <uni-icons type="closeempty" size="30"></uni-icons>
        </view>
        <!-- 评分UI组件 -->
        <view class="rate-fen">
          <uni-section
            title="半星"
            subTitle="使用 allow-half 属性设置是否显示半星"
            type="line"
            padding
          >
            <uni-rate allow-half v-model="TuInfot" />
          </uni-section>
          <view>{{ TuInfot }}分</view>
        </view>
        <!-- 按钮 -->
        <button :disabled="!TuInfot" plain @click="tijiao">确认评分</button>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getSetupScoreAPI, getDownloadAPI } from "@/api/apis.js";

const show = ref(true); //显示隐藏
const TuInfo = ref(true); //图片信息遮罩层;
const TuInfot = ref(0); //评分分数;
const rateValue = ref(null); //评分遮罩层;
const picIndex = ref(0); //通过上个页面传来的ID与接口对比找到对应的图片索引位置;
const picId = ref(null); // 来自上个页面传来的图片ID
const FenLeiList_Look = ref([]); //从本地存储处理的新数据
const PicInfo = ref(null); //当前图片信息
// 性能优化相关
const LookImage = ref([]); //浏览过的图片

// 从本地存储获取数据
let getStorageFenLeiList = uni.getStorageSync("FenLeiList_List") || [];
FenLeiList_Look.value = getStorageFenLeiList.map((item) => {
  // 此处对图片链接进行处理，将_small.webp格式替换为.jpg格式图片
  return {
    ...item,
    picurl: item.smallPicurl.replace("_small.webp", ".jpg"),
  };
});

// 接收上个多页面传来的数据
onLoad((e) => {
  picId.value = e.id;
  picIndex.value = FenLeiList_Look.value.findIndex(
    (item) => item._id == picId.value
  );
  LookImage.value.push(picIndex.value - 1, picIndex.value, picIndex.value + 1);
  PicInfo.value = FenLeiList_Look.value[picIndex.value];
});

// 滑动图片修改图片索引
const picIndexChange = (e) => {
  // 将change检测到的索引赋值给picIndex.value
  picIndex.value = e.detail.current;
  LookImage.value.push(picIndex.value - 1, picIndex.value, picIndex.value + 1);
  PicInfo.value = FenLeiList_Look.value[picIndex.value];
};

// 显示隐藏
const isShow = () => {
  show.value = !show.value;
  console.log("显示隐藏");
};

// 返回上一级;
const toBack = () => {
  uni.navigateBack();
  console.log("返回上一级");
};

// 图片信息遮罩层
const toInfo = () => {
  TuInfo.value.open();
  console.log("打开图片信息遮罩层");
};
// 关闭图片信息遮罩层
const closeInfo = () => {
  TuInfo.value.close();
  console.log("关闭图片信息遮罩层");
};

// 评分模块
const pingFen = () => {
  rateValue.value.open();
};

// 关闭评分模块
const closePingFen = () => {
  rateValue.value.close();
  console.log("关闭评分模块");
};

// 提交评分
const tijiao = async () => {
  let { classid, _id: wallId } = PicInfo.value;
  const res = await getSetupScoreAPI({
    classid,
    wallId,
    userScore: TuInfot.value,
  });

  uni.showToast({
    title: "评分成功",
  });
};

// 点击下载图片
const download = async () => {
  try {
    uni.showLoading({
      title: "下载中...",
      mask: true,
    });
    // let { classid, _id: wallId } = PicInfo.value;
    // let res = await getDownloadAPI({
    //   classid,
    //   wallId,
    // });
    // if (res.errCode !== 0) throw res;

    uni.getImageInfo({
      src: PicInfo.value.picurl,
      success: (res) => {
        uni.saveImageToPhotosAlbum({
          filePath: res.path,
          success: (res) => {
            console.log(res);
          },
          fail: (err) => {
            if (err.errMsg == "saveImageToPhotosAlbum:fail cancel") {
              uni.showToast({
                title: "保存失败，请重新下载",
                icon: "none",
              });
              return;
            }
            uni.showModal({
              title: "提示",
              content: "需要授权保存相册",
              success: (res) => {
                if (res.confirm) {
                  uni.openSetting({
                    success: (setting) => {
                      console.log(setting);
                      if (setting.authSetting["scope.writePhotosAlbum"]) {
                        uni.showToast({
                          title: "授权成功",
                          ico: "none",
                        });
                      } else {
                        uni.showToast({
                          title: "授权失败",
                          icon: "none",
                        });
                      }
                    },
                  });
                }
              },
            });
          },
          complete: () => {
            uni.hideLoading();
          },
        });
      },
    });
  } catch (err) {
    console.log(err);
    uni.hideLoading();
  }
};
</script>

<style scoped lang="scss">
.look {
  width: 100%;
  height: 100vh;
  // border: 1px solid red;

  swiper {
    width: 100%;
    height: 100%;

    swiper-item {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .show {
    .to-back {
      position: absolute;
      top: 80rpx;
      left: 20rpx;
      width: fit-content;
      border-radius: 50%;
      border: 1rpx solid white;
      background-color: rgba(0, 0, 0, 0.1);
    }

    .num {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: fit-content;
      margin: 20vw auto;
      border-radius: 30rpx;
      padding: 5rpx 20rpx;
      color: white;
      background-color: rgba(0, 0, 0, 0.3);
    }

    .time {
      position: absolute;
      top: 25vw;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: white;
      font-size: 150rpx;
    }

    .date {
      position: absolute;
      top: 50vw;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      color: white;
    }

    .about {
      position: absolute;
      bottom: 10vh;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: space-around;
      width: 400rpx;
      border-radius: 40rpx;
      background-color: rgba(255, 255, 255, 0.5);

      .box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10rpx;

        text {
          width: fit-content;
          color: white;
        }
      }
    }
  }

  .info {
    position: relative;
    max-height: 60vh;
    padding: 20rpx;
    font-family: 微软雅黑;

    //盒子左边统一样式
    .info-title {
      flex: 1;
      margin-right: 20rpx;
      text-align: right;
    }
    //右边统一样式
    .right {
      flex: 5;

      uni-tag {
        margin-left: 10rpx;
      }
    }

    .title {
      width: fit-content;
      margin: 0 auto;
    }

    .info-back {
      position: absolute;
      top: 0;
      right: 20rpx;
      padding: 10rpx;
    }

    .info-id {
      display: flex;
    }

    .info-fen {
      display: flex;
      .color {
        color: #93e1ff;
      }
    }

    .info-fa {
      display: flex;
    }

    .info-ping-fen {
      display: flex;

      .right {
        display: flex;
      }
    }

    .info-zhai {
      display: flex;
    }

    .info-biao {
      display: flex;
    }

    .info-sheng {
      padding: 10rpx;
      border-radius: 10rpx;
      background-color: rgba(128, 128, 128, 0.1);
    }
  }

  // info类所有子元素
  .info > view {
    margin: 20rpx auto;
    // border: 1px solid red;
  }

  .rate {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 530rpx;
    height: 330rpx;
    border-radius: 30rpx;
    background-color: white;

    .rate-title {
      width: fit-content;
      margin: 0 auto;
      color: gray;
    }

    .rate-close {
      position: absolute;
      top: 20rpx;
      right: 20rpx;
    }

    .rate-fen {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: fit-content;
      margin: 0 auto;
      color: rgb(255, 202, 62);
    }
  }
}
</style>